<template>
  <div class="admin-body">
    <el-row>
      <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>添加奖品</el-breadcrumb-item>
      </el-breadcrumb>
    </el-row>
    <el-row class="main">
      <el-row :gutter="10" style="min-height: 40px" >
        <div class="title">
          <p>添加中奖奖品</p>
        </div>
        <el-col  style="margin-bottom: 20px;"  align="left" >
          <span style="padding-left: 10px" >一号位奖品：</span>
          <el-select v-model="typeValue1" placeholder="请选择状态" clearable >
            <el-option
              v-for="item in jpData"
              :key="item.prize_id"
              :label="item.prize_name"
              :value="item.prize_id">
            </el-option>
          </el-select>
          <span style="padding-left: 90px" >中奖比率：</span>
          <el-input placeholder="" @click="editSwitch()"  v-model="invoiceValue1" clearable style="width: 150px" type="number" id="inp"></el-input>%
        </el-col>

        <el-col  style="margin-bottom: 20px;"  align="left" >
          <span style="padding-left: 10px" >二号位奖品：</span>
          <el-select v-model="typeValue2" placeholder="请选择状态"clearable >
            <el-option
              v-for="item in jpData"
              :key="item.id"
              :label="item.prize_name"
              :value="item.id">
            </el-option>
          </el-select>
          <span style="padding-left: 90px" >中奖比率：</span>
          <el-input placeholder="" @click="editSwitch()"  v-model="invoiceValue2" clearable style="width: 150px" type="number"></el-input>%
        </el-col>
        <el-col  style="margin-bottom: 20px;"  align="left" >
          <span style="padding-left: 10px" >三号位奖品：</span>
          <el-select v-model="typeValue3" placeholder="请选择状态" clearable >
            <el-option
              v-for="item in jpData"
              :key="item.id"
              :label="item.prize_name"
              :value="item.id">
            </el-option>
          </el-select>
          <span style="padding-left: 90px" >中奖比率：</span>
          <el-input placeholder="" @click="editSwitch()"  v-model="invoiceValue3" clearable style="width: 150px" type="number"></el-input>%
        </el-col>
        <el-col style="margin-bottom: 20px;"  align="left" >
          <span style="padding-left: 10px" >四号位奖品：</span>
          <el-select v-model="typeValue4" placeholder="请选择状态" clearable>
            <el-option
              v-for="item in jpData"
              :key="item.id"
              :label="item.prize_name"
              :value="item.id">
            </el-option>
          </el-select>
          <span style="padding-left: 90px" >中奖比率：</span>
          <el-input placeholder="" @click="editSwitch()"  v-model="invoiceValue4" clearable style="width: 150px" type="number"></el-input>%
        </el-col>
        <el-col  style="margin-bottom: 20px;"  align="left" >
          <span style="padding-left: 10px" >五号位奖品：</span>
          <el-select v-model="typeValue5" placeholder="请选择状态"  clearable >
            <el-option
              v-for="item in jpData"
              :key="item.id"
              :label="item.prize_name"
              :value="item.id">
            </el-option>
          </el-select>
          <span style="padding-left: 90px" >中奖比率：</span>
          <el-input placeholder=""  v-model="invoiceValue5" clearable style="width: 150px" type="number"></el-input>%
        </el-col>

        <el-col align="left">
          <span style="font-size: x-small">提示：中奖比率之和不能大于100%</span>
        </el-col>

        <el-col  :span="24" align="left" style="margin: 20px 0 10px 0">
          <el-button type="primary" @click="editSwitch()">保存</el-button>
          <el-button type="primary" @click="getStart">取 消</el-button>
        </el-col>
      </el-row>
    </el-row>
    <template><span v-loading.fullscreen.lock="fullscreenLoading"></span></template>
  </div>
</template>

<script>
  export default {
    name: "Prize",
    mounted() {
      if(!this.$store.state.login.in){
        this.$router.push({ name: "login", params: { userId: 123 }})
      }
      this.getStart()
      this.getJP()
    },
    data() {
      return {
        pData:[],
        invoiceValue1:'',
        invoiceValue2:'',
        invoiceValue3:'',
        invoiceValue4:'',
        invoiceValue5:'',

        typeValue1:'',
        typeValue2:'',
        typeValue3:'',
        typeValue4:'',
        typeValue5:'',
        fullscreenLoading: false,
        jpData:[],
      }
    },
    methods: {
      getStart() {
        let thi = this
        const por = {}
        thi.typeValue1 = ''
        thi.typeValue2 = ''
        thi.typeValue3 = ''
        thi.typeValue4 = ''
        thi.typeValue5 = ''
        thi.invoiceValue1 = ''
        thi.invoiceValue2 = ''
        thi.invoiceValue3 = ''
        thi.invoiceValue4= ''
        thi.invoiceValue5 = ''
        thi.mySelectAll('ratioList', por).then(function (value) {
          if (value.data[0]){
            thi.typeValue1 = value.data[0].prize_id
            thi.invoiceValue1 = value.data[0].ratio
          }
          if (value.data[1]){
            thi.typeValue2 = value.data[1].prize_id
            thi.invoiceValue2 = value.data[1].ratio
          }
          if (value.data[2]){
            thi.typeValue3 = value.data[2].prize_id
            thi.invoiceValue3 = value.data[2].ratio
          }
          if (value.data[3]){
            thi.typeValue4 = value.data[3].prize_id
            thi.invoiceValue4 = value.data[3].ratio
          }
          if (value.data[4]){
            thi.typeValue5 = value.data[4].prize_id
            thi.invoiceValue5 = value.data[4].ratio
          }

        })
      },
      getJP() {
        let thi = this
        const por = {
          page: thi.page,
          pageSize: 9999,
        }
        thi.mySelectAll('prizeList', por).then(function (value) {
          thi.jpData = value.data
        })
      },


      editSwitch(formName) {
        let thi = this,
          sum=parseInt(thi.invoiceValue1)  + parseInt(thi.invoiceValue2)+ parseInt(thi.invoiceValue3)+ parseInt(thi.invoiceValue4)+parseInt(thi.invoiceValue5)
         console.log(sum)
        if(sum>100){
          thi.$message({
            type: 'warning',
            message: '中奖比率合计不能超过100！'
          });
          return
        }
        var p = []
        if (thi.typeValue1 && thi.invoiceValue1) {
          var a = {
            id:thi.typeValue1,
            ratio:thi.invoiceValue1,
          }
          p.push(a)
        }
        if (thi.typeValue2 && thi.invoiceValue2) {
          var b = {
            id:thi.typeValue2,
            ratio:thi.invoiceValue2,
          }
          p.push(b)
        }
        if (thi.typeValue3 && thi.invoiceValue3) {
          var c = {
            id:thi.typeValue3,
            ratio:thi.invoiceValue3,
          }
          p.push(c)
        }
        if (thi.typeValue4 && thi.invoiceValue4) {
          var d = {
            id:thi.typeValue4,
            ratio:thi.invoiceValue4,
          }
          p.push(d)
        }
        if (thi.typeValue5 && thi.invoiceValue5) {
          var e = {
            id:thi.typeValue5,
            ratio:thi.invoiceValue5,
          }
          p.push(e)
        }

        var j = JSON.stringify(p)
        var k = {json:j}
        thi.mySubmit('ratioSet', k).then(function (code) {
          if (code == 200){
            thi.getStart()
          }
        })
      },

      gohref(name){
        this.$router.push({ name: name,})

      }
    }
  }
</script>

<style scoped>
  .admin-body{
    /*background-color: white;*/
    width: 100%;
  }
  .main{
    background-color: white;
    min-height: 500px;
    padding: 10px;
    margin: 15px;
    border: #EDEDED 1px solid;
    border-radius: 5px;
  }
  .title{
    font-weight: bold;
    border-left: 4px solid #409eff;
    text-align: left;
    margin-bottom: 10px;
    padding-left: 10px;
    height: 25px;
    line-height: 25px;
  }


</style>
